<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包学习</title>
</head>
<body>
<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>
</body>
<script>
    function A() {
        function B() {
            console.log('Hello Closure!')
        }
        return B;
    }

    var C = A();
    C();

    function showHelp(help) {
        document.getElementById('help').innerHTML = help;
    }

    function setupHelp() {
        var helpText = [
            {'id': 'email', 'help': 'Your e-mail address'},
            {'id': 'name', 'help': 'Your full name'},
            {'id': 'age', 'help': 'Your age (you must be over 16)'}
        ];

        for (var i = 0; i < helpText.length; i++) {
            (function () {
                var item = helpText[i];
                document.getElementById(item.id).onfocus = function() {
                    showHelp(item.help);
                }
            })();
        }
    }
    setupHelp();
    var counter = (function () {
        var count = 0;
        function changeBy(val) {
            return count += val;
        }
        return {
            increment:function () {
                changeBy(1);
            },
            decrement:function () {
                changeBy(-1);
            },
            value:function () {
                return count;
            }
        }
    })();

    counter.increment();
    console.log(counter.value());
</script>
</html>